<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<div id="wrapper">
    <div class="main clearfix">
        <div class="col_500">
            <div align="center">
                <h2>Timetabling</h2>
                <table border="0" width="100%">
                    <form action="${baseUrl}/cp/savecourse.html" method="POST" >
                        <tr>
                            <td align="left" width="20%">Sessions</td>
                            <td align="left" width="40%">
                                <select id="sessions" name="sessions" onchange="v_fChangeSession(this)">
                                    <c:forEach var="session" items="${dataSessions.data}">
                                        <option value="${session.session_id}" >${session.year} : Semester ${session.semester}</option>
                                    </c:forEach>
                                </select>
                            </td>
                            <td><span class="error"></span></td>
                        </tr>
                        <tr>
                            <td align="left" width="20%">Course Teacher</td>
                            <td align="left" width="40%">
                                <select id="coursing" name="coursing">
                                    <c:forEach var="coursings" items="${dataCoursing}">
                                        <option class="${coursings.sessions.session_id}" value="${coursings.courseteacher_id}" >${coursings.courses.name} - ${coursings.teachers.name}</option>
                                    </c:forEach>
                                </select>
                            </td>
                            <td><span class="error"></span></td>
                        </tr>
                        <tr>
                            <td align="left" width="20%">Rooms</td>
                            <td align="left" width="40%">
                                <select id="room" name="room">
                                    <c:forEach var="course" items="${dataRooms.data}">
                                        <option value="${course.room_id}" >${course.name}</option>
                                    </c:forEach>
                                </select>
                            </td>
                            <td><span class="error"></span></td>
                        </tr>
                        <tr>
                            <td align="left" width="20%">Time Range</td>
                            <td align="left" width="40%">
                                <select id="time_range" name="time_range">
                                    <option value="0" >Morning</option>
                                    <option value="1" >Afternoon</option>
                                </select>
                            </td>
                            <td align="left"><span class="error"></span></td>
                        </tr>
                        <tr>
                            <td align="left" width="20%">Slot</td>
                            <td align="left" width="40%">
                                <select id="slot" name="slot">
                                    <% for(int i = 1; i<=6; i++) {%>
                                    <option value="<%=i%>" >Slot <%=i%></option>
                                    <% }%>
                                </select>
                            </td>
                            <td align="left"><span class="error"></span></td>
                        </tr>
                        <tr>
                            <td align="left" width="20%">Day</td>
                            <td align="left" width="40%">
                                <select id="day" name="day">
                                    <option value="2" >Monday</option>
                                    <option value="3" >Tuesday</option>
                                    <option value="4" >Wednesday</option>
                                    <option value="5" >Thursday</option>
                                    <option value="6" >Friday</option>
                                </select>
                            </td>
                            <td align="left"><span class="error"></span></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td colspan="2">
                                <input type="button" id="execute"  value="Add" name="Execute" onclick="v_fExecuteTimetabling()" />
                                <input type="button" onclick="formCancel('${baseUrl}/cp/timetabling.html');" value="Cancel"/>
                                <input type="button" id="timetable"  value="Run timetabling" name="Run" onclick="v_fRunAlgorithm()" />
                            </td>
                        </tr>
                    </form>
                </table>
            </div>
        </div>
        <div class="clear"></div>
        <div class="col_900">   
            <a href="<c:url value="${baseUrl}/cp/viewing.html"/>">Viewing</a>
            <table width="100%" cellspacing="0" cellpadding="0" border="0" class="total_res">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Coursing</th>
                        <th>Slot</th>
                        <th>Day</th>
                        <th>Room</th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <c:choose>
                        <c:when test="${dataTimetabling.data != null}">
                            <% int i = 0;%>
                            <c:forEach var="coursings" items="${dataTimetabling.data}">
                                <tr id="${coursings.timetabling_id}">
                                    <% i = i + 1;%>
                                    <td class="column1">
                                        <span><%=i%></span>
                                    </td>
                                    <td class="column2">
                                        <span class="coursing">${coursings.coursing.courseteacher_id}  ${coursings.coursing.courses.name}  ${coursings.coursing.teachers.name}</span>
                                        <input class="coursing" type="hidden" value="${coursings.coursing.courseteacher_id}" />
                                    </td>

                                    <td class="column4">
                                        <span>${coursings.slot}</span>
                                        <input class="slot" type="hidden" value="${coursings.slot}" />
                                        <input class="time_range" type="hidden" value="${coursings.timerange}" />
                                    </td>
                                    <td class="column5">
                                        <span>${coursings.day}</span>
                                        <input class="day" type="hidden" value="${coursings.day}" />
                                    </td>
                                    <td class="column3">
                                        <span>${coursings.rooms.name}</span>
                                        <input class="room" type="hidden" value="${coursings.rooms.room_id}" />
                                    </td>

                                    <td class="column7">
                                        <a href="#" onclick="v_fEditATimetabling(${coursings.timetabling_id});"><img src="<c:url value="${assetsUrl}/images/pencil.png"/>" title="Edit" alt="Edit" /></a>                               
                                    </td> 
                                    <td  class="column8">
                                        <a href="#" class="confirmationRemoving" onclick="v_fRemoveATimetabling(${coursings.courseteacher_id});"><img src="<c:url value="${assetsUrl}/images/trash_can.png"/>" title="Remove" alt="Remove" /></a>                               
                                    </td>
                                </tr>
                            </c:forEach>
                        </c:when>
                        <c:otherwise>
                            <tr>
                                <td colspan="6">There are no results</td>
                            </tr>
                        </c:otherwise>
                    </c:choose>
                </tbody>
            </table>
            <div class="col_730" style="margin-top: 15px;">
             <c:if test="${dataTimetabling.pageCount >= 2}">
                <span class="paging">Page : </span>
                <ul class="paging">
                    <c:forEach var="i" begin="0" end="${dataTimetabling.pageCount-1}">
                        <c:choose>
                            <c:when test="${pageIndex eq i}">
                                <li class="current"><c:out value="${i}"/></li>
                            </c:when>
                            <c:otherwise>
                                    <li><a class="active" href="${baseUrl}/cp/timetabling.html?page=<c:out value="${i}"/>"><c:out value="${i}"/></a></li>
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>
                </ul>
            </c:if>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        var o_Session = document.getElementById("sessions");
        v_fChangeSession(o_Session);
    });

    /* Rung algorithm */
    function v_fRunAlgorithm()
    {
        var sz_RunUrl = "${baseUrl}/cpservice/runalgo.json";
        window.location = "${baseUrl}/cp/runalgorithm.html"
//        $.ajax({
//            type: "POST",
//            url: sz_RunUrl,
//            success: function(response) {
//                if (response.status) {
//                    //$("table tr#"+the_i_TimetablingId).html('');
//                    alert(response.message);
//                    window.location = "${baseUrl}/cp/viewing.html";
//                } else {
//                    alert(response.message);
//                }
//            },
//            error: function(e) {
//                alert('Error: ' + e);
//            }
//        });
    }
    
    /* Change session */
    function v_fChangeSession(the_o_Session)
    {
        var i_SessionId = the_o_Session.value;
        var i_Active = 0;
        $("select#coursing option").each(function(index, value) {
            if ($(this).attr('class') != i_SessionId) {
                $(this).hide();
                $(this).attr("disabled", true);
            } else
            {
                i_Active++;
                $(this).show();
                $(this).attr("disabled", false);
            }
        });
        if(i_Active == 0 )
        {
            //$("select#coursing").html("<option></option>");   
        }
    }

    function v_fEditATimetabling(the_i_TimetablingId)
    {
        v_fAutoLoadTimetabling(the_i_TimetablingId);
        $("input#execute").attr('onclick', 'v_fChangeATimetabling(' + the_i_TimetablingId + ')').val('Edit');
    }

    function v_fChangeATimetabling(the_i_TimetablingId)
    {
        /* Execute saving*/
        var sz_EdiUrl = "${baseUrl}/cpservice/timetablingdetail.json";
        var i_TimetablingId = the_i_TimetablingId;
        var i_CoursingId = $("select#coursing").val();
        var i_RoomId = $("select#room").val();
        var i_Day = $("select#day").val();
        var i_Slot = $("select#slot").val();
        var i_TimeRange = $("select#time_range").val();
        
        $.ajax({
            type: "POST",
            url: sz_EdiUrl,
            data: "id=" + i_TimetablingId + "&coursingId=" + i_CoursingId + "&roomId=" + i_RoomId + "&day=" + i_Day + "&slot=" + i_Slot + "&timerange=" + i_TimeRange,
            success: function(response) {
                if (response.status) {
                    //$("table tr#"+the_i_TimetablingId).html('');
                    alert(response.message);
                    window.location = "${baseUrl}/cp/timetabling.html";
                } else {
                    alert(response.message);
                }
            },
            error: function(e) {
                alert('Error: ' + e);
            }
        });
    }

    function v_fRemoveATimetabling(the_i_TimetablingId)
    {
        //var sz_RemoveUrl = "${baseUrl}/cp/removeacoursing/"+the_i_TimetablingId+".html";
        var sz_RemoveUrl = "${baseUrl}/cpservice/deltimetabling.json";
        $.confirm({
            text: "This is a confirmation dialog manually triggered! Please confirm:",
            confirm: function() {
                $.ajax({
                    type: "POST",
                    url: sz_RemoveUrl,
                    data: "id=" + the_i_TimetablingId,
                    success: function(response) {
                        alert(response.message);
                        if (response.status) {
                            $("table tr#" + the_i_TimetablingId).html('');
                        }
                    },
                    error: function(e) {
                        alert('Error: ' + e);
                    }
                });
            },
            cancel: function() {
                // Cancel removing
            }
        });
    }

    function v_fExecuteTimetabling()
    {
        var sz_AddUrl = "${baseUrl}/cpservice/addatimetabling.json";
        var i_CoursingId = $("select#coursing").val();
        var i_RoomId = $("select#room").val();
        var i_Day = $("select#day").val();
        var i_Slot = $("select#slot").val();
        var i_TimeRange = $("select#time_range").val();
        var isDisabled = $("select#coursing").find("option[value="+i_CoursingId+"]").is(":disabled");
        
        if(i_CoursingId != '' && isDisabled == false){
        $.ajax({
            type: "POST",
            url: sz_AddUrl,
            data: "coursingId=" + i_CoursingId + "&roomId=" + i_RoomId + "&day=" + i_Day + "&slot=" + i_Slot + "&timerange=" + i_TimeRange,
            success: function(response) {
                if (response.status) {
                    alert(response.message);
                    window.location = "${baseUrl}/cp/timetabling.html";
                } else {
                    alert(response.message);
                }
            },
            error: function(e) {
                alert('Error: ' + e);
            }
        });
        }else{
            alert("You have to choose one Course Teacher.");
        }
    }

    function v_fAutoLoadTimetabling(the_i_Id)
    {
        /* Show choosing row*/
        var i_CoursingId = $("tr#" + the_i_Id).find("input.coursing").val();
        if(i_CoursingId != '')
        {
            var sessionId = $("select#coursing").find("option[value="+i_CoursingId+"]").attr('class');
            if(sessionId != '')
            {
                $("select#sessions").val(sessionId).change();
            }
        }
        var i_SlotId = $("tr#" + the_i_Id).find("input.slot").val();
        var i_DayId = $("tr#" + the_i_Id).find("input.day").val();
        var i_RoomId = $("tr#" + the_i_Id).find("input.room").val();
        var i_TimeRange = $("tr#" + the_i_Id).find("input.room").val();
        var i_TimeRange = $("tr#" + the_i_Id).find("input.time_range").val();
        // reset tr class
        $("tr.selected").removeClass("selected");
        // highlight selected
        $("tr#" + the_i_Id).addClass("selected");

        $("select#coursing").val(i_CoursingId).show().change();
        $("select#room").val(i_RoomId).change();
        $("select#day").val(i_DayId).change();
        $("select#slot").val(i_SlotId).change();
        $("select#time_range").val(i_TimeRange).change();

        $("select").animate({backgroundColor: "#FFFF66"}, 500).delay(400);
    }
</script>